
@import url("@/static/styles/colors.less");

.user-profile {
  width: 100%;
  background: #fff;

  .profile-card {
    // 替代原：linear-gradient(135deg, @primary-color, @primary-color)
    // background: linear-gradient(135deg, @color-primary, @color-primary)
    border-radius: 0 0 50% 30% / 15%;
	  background: linear-gradient(135deg, @color-primary, @color-primary);
    padding: 30rpx 24rpx 60rpx;
    margin-bottom: 30rpx;
    color: @color-text-white; // 替代 @text-white
    position: relative;
    overflow: hidden;

    // 装饰弧形
    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 40rpx;
      // 替代 rgba(255,255,255,0.05) → 使用透明度变量
      // background: rgba(255, 255, 255, @opacity-10);
      border-radius: 50% 50% 0 0 / 30%;
    }

    .profile-header {
      display: flex;
      align-items: center;
      margin-bottom: 40rpx;
      position: relative;
      z-index: 10;

      .avatar {
        width: 140rpx;
        height: 140rpx;
        border-radius: 50%;
        border: 4rpx solid rgba(255, 255, 255, 0.3);
        overflow: hidden;
        // 替代 rgba(0,0,0,0.1) → 使用 @opacity-20
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, @opacity-20);

        image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .user-details {
        margin-left: 28rpx;
        flex: 1;

        .user-title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 16rpx;

          text {
            font-size: 36rpx;
            font-weight: 600;
            text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, @opacity-20);
          }
        }

        .user-location {
          font-size: 26rpx;
          opacity: @opacity-85; // 替代 0.9
          display: flex;
          align-items: center;

          text:first-child {
            opacity: @opacity-70; // 替代 0.8
          }

          text:last-child {
            margin-left: 8rpx;
            max-width: 400rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }

    .profile-stats {
      display: flex;
      justify-content: space-around;
      position: relative;
      z-index: 10;

      .stat-item {
        text-align: center;
        padding: 20rpx 10rpx;
        width: 33.333%;

        &__value {
          display: block;
          font-size: 38rpx;
          font-weight: 700;
          margin-bottom: 8rpx;
          text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, @opacity-20);
        }

        &__label {
          font-size: 24rpx;
          opacity: @opacity-85; // 替代 0.85
        }
      }
    }
  }

  .order-section {
    padding: 30rpx;
    padding-bottom: 30rpx;
    border-bottom: 9rpx solid @color-bg-page;

    &__title {
      font-size: 32rpx;
      font-weight: 600;
      // color: @color-text-dark;
      margin-bottom: 24rpx;
      padding-left: 20rpx;
    }
  }

  .order-grid {
    display: flex;
    justify-content: space-around;
    // background: #fff;
    // border-radius: 12px;
    padding: 30rpx 0;
    // box-shadow: 0 4rpx 12rpx @color-border-light;
  }

  .order-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 25%;

    .iconfont {
      font-size: 48rpx;
      color:#666666;
      margin-bottom: 12rpx;
    }
  }

  .order-status-label {
    font-size: 26rpx;
    color: @color-text-secondary;
    margin-top: 8rpx;
  }
}

.info-section {
  width: 100%;
  padding: 20rpx;
  margin: 10rpx 0;
  background: @color-white;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  // 标题样式
  &__title {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 18rpx;

    text {
      font-size: 30rpx;
      font-weight: 600;
      color: @color-text-dark;
    }
  }
}

// 信息卡片
.info-card {
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 22rpx;
  background: @color-white;
  border-bottom: 1px solid @color-border-light;
  box-sizing: border-box;

  // 图标
  .iconfont {
    font-size: 44rpx;
    flex-shrink: 0;

    // 不同卡片图标颜色
    &.info-card--urgent & {
      color: @color-danger;
    }

    &.info-card--health & {
      color: @color-blue;
    }
  }

  // 内容区
  &__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
  }

  &__title {
    font-size: 26rpx;
    color: @color-text-dark;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &__action {
    display: flex;
    align-items: center;
    gap: 8rpx;
    color: @color-text-secondary;
    font-size: 26rpx;
  }

  // 按钮
  wot-button,
  wd-button {
    padding: 6rpx 16rpx;
    font-size: 22rpx;
    white-space: nowrap;
  }

  // 最后一个不加边框
  &:last-child {
    border-bottom: none;
  }

  // 紧急联系卡片图标颜色
  &--urgent {
    .iconfont {
      color: @color-danger;
    }
  }

  // 健康状态卡片图标颜色
  &--health {
    .iconfont {
      color: @color-blue;
    }
  }
}

.service-menu {
  padding: 30rpx;
  background-color: @color-white;
  margin: 9rpx 0;
  box-sizing: border-box;

  // 标题样式
  &__title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 22rpx;
    padding-bottom: 10rpx;
    padding-left: 20rpx;

    text {
      font-size: 30rpx;
      font-weight: 600;
      color: @color-text-dark;
    }
  }

  // 网格容器
  &__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20rpx;
    width: 100%;
  }

  // 菜单项
  &__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 160rpx;
    transition: all 0.2s ease;

    // 图标
    .service-menu__icon {
      font-size: 48rpx;
      color: @color-text-secondary;
      margin-bottom: 14rpx;
      &:extend(.iconfont);
    }

    // 文字
    .service-menu__text {
      font-size: 24rpx;
      color: @color-text-secondary;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}